<template>
  <div class="home">
    <el-drawer
      title="我是标题"
      :visible.sync="isShow"
      :direction="direction"
      :with-header="false"
      size="80%"
      :before-close="handleClose"
    >
      <NavDrawer :navbarList="navbarList"></NavDrawer>
    </el-drawer>
    <div class="home-content">
      <NavBar :navbarList="navbarList" v-if="navbarList.length > 0"></NavBar>
      <ContentTitle v-if="isShowContentTitle"></ContentTitle>
      <div class="item-content">
        <!-- content-item-home 首页插槽 -->
        <slot name="content-item-home"></slot>
        <!-- content-item-breadCrumb 面包屑导航插槽 -->
        <slot name="content-item-breadCrumb"
          ><BreadCrumb v-if="isShowBreadCrumb"></BreadCrumb
        ></slot>
        <div class="content">
          <div class="content-left">
            <!-- content-item 内容插槽 -->
            <slot name="content-item"></slot>
          </div>
          <Archived v-if="isShowArchived"></Archived>
        </div>
      </div>
      <BaseFoot></BaseFoot>
      <div class="footer-bar">
        <div @click="handleGoPage('/')">
          <i class="iconfont icon-shouye201"></i>
          <span>首页</span>
        </div>
        <div @click="handleGoPage('/dynamic-state')">
          <i class="iconfont icon-shuaxin1"></i>
          <span>动态</span>
        </div>
        <div @click="handleGoPage('/set/general')">
          <i class="iconfont icon-huamingce"></i>
          <span>会员</span>
        </div>
        <div @click="handleGoPage">
          <i class="iconfont icon-qq"></i>
          <span>客服(新)</span>
        </div>
        <div @click="handleGoPage('/appSearch')">
          <i class="iconfont icon-sousuo_o"></i>
          <span>搜索</span>
        </div>
        <div @click="handleGoPage">
          <i class="iconfont icon-24gf-bubbles4"></i>
          <span>社区</span>
        </div>
        <div @click="handleGoPage">
          <i class="iconfont icon-shoucangxuanzhong"></i>
          <span>APP</span>
        </div>
      </div>
      <div class="go-top">
        <div class="qq">
          <div>
            <i class="iconfont icon-qq"></i>
            <span>联系客服</span>
          </div>
        </div>
        <div class="community">
          <div>
            <i class="iconfont icon-xiazai16"></i>
            <span>会员社区</span>
          </div>
        </div>
        <div class="share">
          <div>
            <i class="iconfont icon-fenxiangtianchong"></i>
            <span>分享本页</span>
          </div>
        </div>
        <div class="goTop">
          <div v-show="isShowGT" @click="handleGoTop">
            <i class="iconfont icon-shangjiantou"></i>
            <span>返回顶部</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/navbar/NavBar.vue";
import NavDrawer from "@/components/navdrawer/NavDrawer.vue";
import ContentTitle from "@/components/contenttitle/ContentTitle.vue";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import Archived from "@/components/archived/Archived.vue";
import BaseFoot from "@/components/baseheaderfooter/footer/BaseFoot.vue";
import { mapState, mapMutations } from "vuex";
// import { getClassify } from "@/api/api";
export default {
  name: "HomeView",
  components: {
    NavBar,
    NavDrawer,
    ContentTitle,
    BreadCrumb,
    Archived,
    BaseFoot,
  },
  props: {
    isShowContentTitle: {
      type: Boolean,
      default: false,
    },
    isShowBreadCrumb: {
      type: Boolean,
      default: false,
    },
    isShowArchived: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      direction: "ltr",
      isShow: this.isClose,
      isShowGoTop: true,
      isShowGT: false,
      navbarList: [],
    };
  },
  computed: {
    ...mapState(["isClose"]),
  },
  watch: {
    isClose() {
      this.isShow = this.isClose;
      if (this.isShow) {
        document.querySelector(".home-content").style.transform =
          "translate(80%)";
      } else {
        document.querySelector(".home-content").style = "";
      }
    },
    isShow() {
      if (this.isShow) {
        document.querySelector(".home-content").style.transform =
          "translate(80%)";
        document.querySelector("html").style.overflow = "hidden";
      } else {
        document.querySelector(".home-content").style = "";
        document.querySelector("html").style.overflow = "auto";
      }
    },
  },
  async fetch() {
    this.isShow = this.isClose;
    //获取菜单列表
    const res = await this.$api.getClassify();
    this.navbarList = res.data;
  },
  mounted() {
    window.addEventListener("scroll", this.setScrollTop);
    window.addEventListener("resize", this.setResize);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.setScrollTop);
    window.removeEventListener("resize", this.setResize);
  },
  methods: {
    ...mapMutations(["handleClose"]),
    setResize() {
      if (window.innerWidth > 992) {
        if (this.isClose) {
          this.isShow = false;
        }
      } else {
        if (this.isClose) {
          this.isShow = true;
        }
      }
    },
    setScrollTop() {
      if (document.querySelector("html").scrollTop >= 200) {
        this.isShowGT = true;
      } else {
        this.isShowGT = false;
      }
    },
    handleGoTop() {
      let interTime = document.querySelector("html").scrollTop / 50;
      let interIndex = setInterval(() => {
        document.querySelector("html").scrollTop =
          document.querySelector("html").scrollTop - interTime;
        if (document.querySelector("html").scrollTop <= 0) {
          clearInterval(interIndex);
        }
      }, 10);
    },
    handleGoPage(path) {
      if (path) {
        this.$router.push(path);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@media only screen and (min-width: 1240px) {
  .item-content {
    width: 1200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1240px) {
  .item-content {
    width: 970px;
  }
}
@media only screen and (max-width: 992px) {
  .item-content {
    width: 750px;
  }
}
@media only screen and (max-width: 768px) {
  .item-content {
    width: 100%;
  }
  .go-top {
    display: none;
  }
  .footer-bar {
    display: flex !important;
  }
}
.home {
  width: 100%;
  position: relative;
  /deep/.el-drawer__wrapper {
    .el-drawer {
      background: #0088cc;
    }
  }
  .home-drawer {
    width: 80%;
    position: absolute;
  }
  .home-content {
    width: 100%;
    position: relative;
    transition: transform 0.5s;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    .item-content {
      margin: 0 auto;
      flex: 1;
      .content {
        display: flex;
        margin-top: 10px;
        .content-left {
          width: 100%;
          flex: 1;
        }
      }
    }
    .footer-bar {
      position: sticky;
      bottom: 0;
      display: none;
      justify-content: space-around;
      padding: 7px 0;
      background: #fff;
      border-top: 1px solid #e7e7e7;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        width: 100%;
        cursor: pointer;
        i {
          font-size: 20px;
          font-weight: bold;
        }
        span {
          margin-top: 2px;
        }
        &:nth-of-type(4) {
          color: red;
        }
      }
    }
    .go-top {
      position: fixed;
      bottom: 20%;
      right: 20px;
      width: 62px;
      border-radius: 4px;
      overflow: hidden;
      > div {
        width: 100%;
        height: 65px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        border-top: 1px solid #1c69ad;
        > div {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: #1e73be;
          cursor: pointer;
          &:hover {
            background: #1c69ad;
          }
          i {
            font-size: 28px;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}
</style>
